<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>订单确认</title>
    <meta name="keywords">
    <meta name="description">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/liMarquee.css">
    <link rel="stylesheet" href="./css/layui.css">
    <link rel="stylesheet" href="./css/1.css">
    <link rel="stylesheet" href="./css/user.css">
    <link rel="stylesheet" href="css/checkout.css">
    <script src="./js/axios.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery v.3.5.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<style>
    .tab {
        width: 600px;
    }
</style>

<body>
    <div id="app">
        <div class="header">
            <div class="header-left">
                <div class="logo">
                    <img src="./img/logo.png" alt="">
                </div>
                <div class="location">
                    <a href="#">
                        <span>珠海市</span>
                    </a>
                </div>
                <div class="products">
                    <a href="#">
                        <span>所有产品</span>
                    </a>
                </div>
                <div class="home">
                    <a href="./sy/cookie.html">
                        <span>首页</span>
                    </a>
                </div>
                <div class="cakes">
                    <a href="#">
                        <span>蛋糕</span>
                    </a>
                </div>
                <div class="breads">
                    <a href="./mb.html">
                        <span>面包</span>
                    </a>
                </div>
                <div class="snacks">
                    <a href="snack.html">
                        <span>小食</span>
                    </a>
                </div>
                <div class="bds">
                    <a href="./test.html">
                        <span>企业专区</span>
                    </a>
                </div>
            </div>
            <div class="header-right">
                <div class="login-header">
                    <span class="head-span">
                        <span v-if="user_name==null">
                            <span class="zhuce">
                                <a href="./register.html">注册</a>
                            </span>&nbsp;|&nbsp;
                            <span class="login">
                                <a href="./Login.html">登录</a>
                            </span>

                        </span>

                        <a v-else><img src="./img/user.png"></a>
                        <!-- <a href="./Login.html">{{user_name}}</a> -->
                    </span>
                </div>
                <div class="mycar">
                    <a href="ShoppingCart.html"><img class="car" src="./img/bag1.png" alt=""></a>
                </div>
                <div class="activity">
                    <img class="icon2" src="./img/icon02.png" alt="">
                </div>
            </div>
        </div>

        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" style="width: 20%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            详细地址
                        </h4>
                    </div>
                    <div class="modal-body">
                        <input class="form-control" type="text" placeholder="收货人" :value="dd.shr" v-model="dd.shr">
                        <br>
                        <input class="form-control" type="text" placeholder="联系方式" :value="dd.phone" v-model="dd.phone">
                        <br>
                        <input class="form-control" type="text" placeholder="珠海市">
                        <br>
                        <select class="form-control" v-model="dd.quyu">
                            <option disabled selected value>请选择区域</option>
                            <option value="香洲区">香洲区</option>
                            <option value="金湾区">金湾区</option>
                            <option value="斗门区">斗门区</option>
                        </select>
                        <br>
                        <input class="form-control" type="text" placeholder="收货地址,如小区丶公司丶学校丶公寓" :value="dd.xiangxidiz"
                            v-model="dd.xiangxidiz">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" @click="add(dd)
                        ">
                            保存并使用
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>



        <!-- /.modal -->
        <!-- 内容 -->
        <div class="order-content">

            <div class="order-box">
                <div class="order-title">
                    <h2>填写地址</h2>
                </div>
                <div class="order-person">
                    <table class="tab">
                        <tr style="height: 100px;" v-if="dda!=''">
                            <td>收货人</td>
                            <td>联系方式</td>
                            <td>区域</td>
                            <td>详细地址</td>

                        </tr>
                        <tr v-for="(dd,index) in dda" :key="dd.id">
                            <td>{{dd.shr}}</td>
                            <td>{{dd.phone}}</td>
                            <td>{{dd.quyu}}</td>
                            <td>{{dd.xiangxidiz}}</td>
                            <!-- <td><button @click="del(d,index)">
                                    </svg></button></td> -->

                        </tr>
                    </table>
                    <div class="order-person-top">
                        <div id="shippingAddress" class="shippingAddress">
                        </div>

                        <div class="person-right">
                            <button class="choose-btn" class="btn btn-primary btn-lg" data-toggle="modal"
                                data-target="#myModal">选择地址</button>
                        </div>
                    </div>

                    <div class="order-person-bot">
                        <span>配送时间</span>

                        <span> <input type="date" id="start" name="trip-start" value="2022-09-05" min="2022-09-05"
                                max="" style="height: 35.5px; width: 250px;" v-model="rq" /></span>
                        <span>
                            <select id="selectLeo" v-model="sj" class="form-control form-control-placeholder"
                                style="width: 250px; margin-left: 180px;">
                                <option value="-1" disabled selected value>请选择配送时间</option>
                                <option value="10:00-11:00" style="color: black;">10:00-11:00</option>
                                <option value="11:00-12:00" style="color: black;">11:00-12:00</option>
                                <option value="12:00-13:00" style="color: black;">12:00-13:00</option>
                                <option value="13:00-14:00" style="color: black;">13:00-14:00</option>
                                <option value="14:00-15:00" style="color: black;">14:00-15:00</option>
                                <option value="15:00-16:00" style="color: black;">15:00-16:00</option>
                                <option value="16:00-17:00" style="color: black;">16:00-17:00</option>
                                <option value="17:00-18:00" style="color: black;">17:00-18:00</option>
                                <option value="18:00-20:00" style="color: black;">18:00-20:00</option>
                            </select>
                        </span>

                        <span style="width: 300px;margin-left: 450px; color: red;" v-model="sj"
                            v-if="sj!=''">{{rq}}配送时间{{sj}}
                        </span>
                    </div>

                </div>
                <table class="tab">
                    <tr style="height: 100px;" v-if="gwc!=''">

                        <td>图片</td>
                        <td>名称</td>
                        <td>口味</td>
                        <td>kg</td>
                        <td>日期</td>
                        <!-- <td>数量</td> -->
                        <td>价格</td>

                    </tr>
                    <tr v-for="(d,index) in gwc" :key="d.id">
                        <td><img :src="d.img" alt="" width="100px"></td>
                        <td>{{d.name}}</td>
                        <td>{{d.type}}</td>
                        <td>{{d.kg}}</td>
                        <td>{{d.date}}</td>
                        <td>{{d.price}}</td>
                        <!-- <td><button @click="del(d,index)">
                                </svg></button></td> -->

                    </tr>
                </table>
                <p v-if="gwc!=''">含10套餐具（每套一个餐盘，一把餐勺）</p>

                <div class="card-tab">
                    <div class="card-tab-t">
                        <ul class="clear">
                            <li style="background-color:#1AAD19;">
                                <div><img src="./img/weixin1.png" /><span>微信支付</span></div>
                            </li>

                            <li style="background-color:#00BFFF;">
                                <div class="div01"><img src="./img/zfb.jpg"><span>支付宝</span></div>
                            </li>

                        </ul>
                    </div>
                </div>
                <div class="num" style="margin-left: 950px;">
                    <h1>合计:{{priceNum}}</h1>
                </div>


                <div class="person-right">
                    <button class="choose-btn" style="margin-top: -100px;background-color: yellow;border-radius: 80px;"
                        @click="tijiao()">提交订单 </button>
                </div>
                <br>
                <br>
                <br>
            </div>
        </div>

    </div>
    </div>
    </script>
    <div class="footer">
        <div class="footer-cont">
            <div class="footer-left">
                <div class="foot-logo">
                    <img src="./img/logo1.png" alt="">
                    <div class="left-p">
                        <p>订购热线:4006-678-678(8:00 - 20:00)</p>
                        <p>客服邮箱:cs@mcake.com</p>
                        <p>地址:珠海市</p>
                        <p><a href="//static.mcake.com/file/5ef5931c2226a424/c9907a053fdbcab9.jpg"
                                target="_blank">食品生产许可证:SC12431010700121</a></p>
                    </div>
                </div>
            </div>
            <div class="footer-right">
                <div class="about">
                    <h3>关于我们</h3>
                    <p>
                        <a href="/page/about" title="企业介绍">企业介绍</a>
                    </p>
                    <p>
                        <a href="/page/media" title="媒体合作">媒体合作</a>
                    </p>
                    <p>
                        <a href="/article/id/61">招贤纳士</a>
                    </p>
                    <p>
                        <a href="/article/id/47">呼叫中心</a>
                    </p>
                </div>
                <div class="help">
                    <h3>帮助中心</h3>
                    <p>
                        <a href="/page/advice" title="投诉与建议">投诉与建议</a>
                    </p>
                    <p>
                        <a href="/page/member" title="会员权益">会员权益</a>
                    </p>
                    <p>
                        <a href="/page/shopping" title="购物指南">购物指南</a>
                    </p>
                    <p>
                        <a href="/article/id/57">支付类</a>
                    </p>
                    <p>
                        <a href="/article/id/56">订单相关</a>
                    </p>
                    <p>
                        <a href="/page/maps">配送服务</a>
                    </p>
                </div>
                <div class="find">
                    <h3>发现</h3>
                    <p>
                        <a href="/article/id/65">公告</a>
                    </p>
                </div>
                <div class="wei">
                    <img title="关注公众号" alt="微信公众号" class="weixin" src="./img/weixin.png" />
                    <img class="ewm" src="./img/erw.jpg" />
                    <a href="http://weibo.com/mcake1893" target="_blank">
                        <img title="关注微博" alt="新浪微博" class="weibo" src="./img/weibo.png" />
                    </a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="bot-p1">
                <p>上海卡法电子商务有限公司</p>
                <p>地址：上海市普陀区同普路1130弄3号楼</p>
                <p>洽谈电话：021-52691591</p>
                <p class="gov-p">
                    <a href="//static.mcake.com/file/45bd630382f3722e/1e072161a0cfb0f3.jpg"
                        target="_blank">社会信用代码：913101070678091460</a>
                </p>
                <p class="gov-p">
                    <a href="//static.mcake.com/file/9cf52502c183b213/64537636f9b040f8.jpg"
                        target="_blank">食品经营许可证：JY13101070034251</a>
                </p>
            </div>
            <div class="bot-p2">
                <p>上海卡法电子商务有限公司北京分公司</p>
                <p>地址：北京市朝阳区望京西路甲50号1号楼6层1-08内606单元</p>
                <p>洽谈电话：010-64720188</p>
                <p class="gov-p">
                    <a href="//static.mcake.com/file/fff42d8b8ff23356/56acc718c877.jpg"
                        target="_blank">社会信用代码：911101053484280752</a>
                </p>
                <p class="gov-p">
                    <a href="//static.mcake.com/file/fff42d8b8ff23356/39408cbe5632.jpg"
                        target="_blank">食品经营许可证：JY11105262932938</a>
                </p>
            </div>
            <div class="bot-p3">
                <p>上海卡法电子商务有限公司杭州分公司</p>
                <p>地址：杭州市拱墅区朝晖路179号嘉汇大厦2号楼25-1室</p>
                <p>洽谈电话：0571-28103688</p>
                <p class="gov-p">
                    <a href="//static.mcake.com/file/0892df100e0f3c76/09c369ed881ad213.jpg"
                        target="_blank">社会信用代码：913301060920344424</a>
                </p>
                <p class="gov-p">
                    <a href="//static.mcake.com/file/233aaf781606c528/4e3cc903c472f0d1.jpg"
                        target="_blank">食品经营许可证：JY13301050141226</a>
                </p>
            </div>

        </div>
        <p class="copyright">
            Copyright © 2012-2023 上海卡法电子商务有限公司 版权所有 l <a href="http://beian.miit.gov.cn"
                target="_blank">沪ICP备12022075号</a>
            l
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010702005582"
                target="_blank">沪公网安备31010702005582号</a>
        </p>
    </div>
    <script>

        const vm = new Vue({
            el: "#app",
            data: {
                sj: "",
                rq: "",
                user_name: "",
                gwc: [],
                d: {
                    id: "",
                    name: "",
                    type: "",
                    kg: "",
                    img: "",
                    price: "",
                    date: ""
                },
                dda: [],
                dd: {
                    id: "",
                    shr: "",
                    phone: "",
                    quyu: "",
                    xiangxidiz: ""
                },
                priceNum: 0
            },
            created() {
                axios.get("http://127.0.0.1:1234/api/DianDan").then(response => {
                    this.dda = response.data;
                }).catch(err => {
                    alert(err)
                })

                this.user_name = sessionStorage.getItem("user_name");
                this.StuN();
            },
            methods: {
                getPriceNum() {
                    console.log(this.gwc.length)
                    console.log(this.gwc)
                    for (let index = 0; index < this.gwc.length; index++) {
                        this.priceNum = this.priceNum += Number(this.gwc[index].price)
                        console.log(this.gwc[index].price)
                    }
                    console.log(this.priceNum)
                },
                tijiao() {
                    sessionStorage.setItem("rq", this.rq);
                    sessionStorage.setItem("sj", this.sj);
                    location.href = "maidan.html"
                },
                /**显示*/
                StuN() {
                    console.log(this.d);
                    axios
                        .post("http://127.0.0.1:1234/Gwc/spper", this.d)
                        .then((response) => {
                            this.gwc = response.data;
                            console.log(this.d);
                            this.getPriceNum();
                        });
                },
                //删除
                del(d, index) {
                    if (confirm("宁确定要删除吗？")) {
                        console.log(d, index);
                        axios.delete(`http://127.0.0.1:1234/Gwc/${d.id}`)
                            .then(response => {
                                if (response.data === 1) {
                                    vm.gwc.splice(index, 1);
                                }
                                location.reload()
                            }).catch(err => {
                                alert(err);
                            })
                    }
                },
                add(dd) {
                    axios.post("http://127.0.0.1:1234/api/DianDan/addDianDan", dd).then(res => {
                        if (res.data === 1) {
                            alert("成功新增地址!")
                            location.href = "dingdanxiangxi.html"
                        }
                    })
                        .catch((err) => {
                            alert(err);
                        });
                },
                getImgUrl(name) {
                    return "/image/" + name
                },
            },


        });




        window.alert = alert;
        function alert(data, callback) { //回调函数
            var alert_bg = document.createElement('div');
            alert_box = document.createElement('div'),
                alert_text = document.createElement('div'),
                alert_btn = document.createElement('div'),
                textNode = document.createTextNode(data ? data : ''),
                btnText = document.createTextNode('确 定');

            // 控制样式
            css(alert_bg, {//背景颜色设置
                'position': 'fixed',
                'top': '0',
                'left': '0',
                'right': '0',
                'bottom': '0',
                'background-color': 'rgba(0, 0, 0, 0.1)',
                'z-index': '999999999'
            });

            css(alert_box, {//控制盒子大小、背景颜色上下边距
                'width': '270px',
                'max-width': '90%',
                'font-size': '16px',
                'text-align': 'center',
                'background-color': '#fff',
                'border-radius': '15px',
                'position': 'absolute',
                'top': '50%',
                'left': '50%',
                'transform': 'translate(-50%, -50%)'
            });

            css(alert_text, {
                'padding': '10px 15px',
                'border-bottom': '1px solid #ddd'
            });

            css(alert_btn, {
                'padding': '10px 0',
                'color': '#007aff',
                'font-weight': '600',
                'cursor': 'pointer'
            });

            // 内部结构套入
            alert_text.appendChild(textNode);
            alert_btn.appendChild(btnText);
            alert_box.appendChild(alert_text);
            alert_box.appendChild(alert_btn);
            alert_bg.appendChild(alert_box);

            // 总体显示到页面内
            document.getElementsByTagName('body')[0].appendChild(alert_bg);

            // 肯定绑定点击事件删除标签
            alert_btn.onclick = function () {
                alert_bg.parentNode.removeChild(alert_bg);
                if (typeof callback === 'function') {
                    callback(); //回调
                }
            }
        }

        function css(targetObj, cssObj) {
            var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
            for (var i in cssObj) {
                str += i + ':' + cssObj[i] + ';';
            }
            targetObj.style.cssText = str;
        }

    </script>


</body>

</html>